/**
* @name 待支付
* @description:
* @param
* @return
*/
<template>
	<view class="order">
		<!-- 日历 -->
		<calendar @changeCalendar="changeCalendar($event)"></calendar>

		<template v-if="records.length">
			<view class="orderCard" v-for="(items, idxs) of records" :key="idxs">
				<view class="orderHeader">
					<view class="orderHeaderItem">订单号：{{items.code}}</view>
					<view class="orderHeaderItem">
						下单时间：{{formDate(new Date(items.xdtm)) + " " + formTime(new Date(items.xdtm))}}
					</view>
					<view class="orderHeaderItem">配送费：{{items.sendcost}}元</view>
					<view class="orderHeaderItem">订单金额：{{items.ordercost}}元</view>
					<view class="orderHeaderItem">总计：{{items.ordercosts}}元</view>

					<view class="btns">
						<u-button class="btn" type="warning" size="mini" @click="showCancelModal(items)">取消订单</u-button>
						<u-button class="btn" type="error" size="mini" @click="pay(items)">继续支付</u-button>
					</view>
				</view>

				<view class="orderContainer">
					<view class="orderList" v-for="(item,idx) of items.orderitms" :key="idx">

						<!-- 图片 -->
						<image class="img" :src="imgUrl(JSON.parse(item.exptxt).content.main.pic)"></image>

						<!-- 内容 -->
						<view class="orderListBox">

							<!-- 标题 -->
							<view class="orderListTitle">{{JSON.parse(item.exptxt).title}}</view>

							<!-- 主菜 -->
							<view class="orderListItem" v-if="!JSON.parse(item.exptxt).content.side.id && 
								!JSON.parse(item.exptxt).content.vegetables.id && 
								!JSON.parse(item.exptxt).content.staple.id && 
								!JSON.parse(item.exptxt).content.other.length">
								<template v-if="JSON.parse(item.exptxt).content.main.description">
									主菜：{{JSON.parse(item.exptxt).content.main.title}} + {{JSON.parse(item.exptxt).content.main.description}}
								</template>
								<template v-else>
									主菜：{{JSON.parse(item.exptxt).content.main.title}}
								</template>
							</view>
							<view class="orderListItem" v-else>
								主菜：{{JSON.parse(item.exptxt).content.main.title}}
							</view>

							<!-- 副菜 -->
							<view v-if="JSON.parse(item.exptxt).content.side.id" class="orderListItem">
								副菜：{{JSON.parse(item.exptxt).content.side.title}}
							</view>

							<!-- 青菜 -->
							<view v-if="JSON.parse(item.exptxt).content.vegetables.id" class="orderListItem">
								青菜：{{JSON.parse(item.exptxt).content.vegetables.title}}
							</view>

							<!-- 小食 -->
							<view v-if="JSON.parse(item.exptxt).content.staple.id" class="orderListItem">
								小食：{{JSON.parse(item.exptxt).content.staple.title}}
							</view>

							<!-- 其他 -->
							<view class="orderListItem" v-if="JSON.parse(item.exptxt).content.other.length">
								其他：
								<text v-for="(otherItem,otherIdx) of JSON.parse(item.exptxt).content.other" :key="otherIdx">
									{{otherItem.title + ' '}}
								</text>
							</view>

						</view>
					</view>
				</view>
			</view>

			<!-- 加载更多 -->
			<u-loadmore :status="status" />
		</template>

		<template v-else>
			<view class="empty">空空如也~</view>
		</template>

		<!-- loading -->
		<wyb-loading ref="loading" />

		<!-- 取消弹窗 -->
		<u-modal v-model="cancelModalShow" content="确定取消吗？" @confirm="cancelConfirm" :async-close="true" show-cancel-button="true"></u-modal>

		<!-- 提示 -->
		<u-toast ref="uToast" />

	</view>
</template>

<script>
	import * as api from '@/api/apiList/user/billSummary.js'; //查看订单
	import * as orderApi from '@/api/apiList/user/order.js'; //取消订单
	import * as wxApi from '@/api/apiList/pay.js'; //微信支付

	import calendar from "@/components/calendar.vue"

	export default {
		components: {
			calendar
		},
		data() {
			return {
				records: [], //订单列表
				state: 1, //状态 1、待支付、2待接单，3，已接单，4，已配送
				current: 1, //第几页
				pages: 0, //共有多少页
				sday: this.formDate(new Date()), //日期
				status: "loadmore", //loading状态
				cancelItems: "", //取消选项
				payItems: "", //支付选项
				cancelModalShow: false, //取消弹窗
			}
		},
		watch: {
			sday: { //监听日期切换更改订单列表
				handler(val) {
					this.init(this.state, 1, val)
				},
				immediate: true,
				deep: true
			}
		},
		methods: {
			async API_order(state, current, sday) {
				//查看订单接口
				let result = {
					page: {
						current, //第几页
						size: 5 //每页显示多少条数据
					},
					param: {
						state, //状态 1、待支付、2待接单，3，已接单，4，已配送
						sday, //日期
					}
				};
				return await api.list(result);
			},
			async API_cancelOrder(id) {
				//取消订单接口
				let result = {
					param: {
						id
					}
				}
				return await orderApi.cancelOrder(result);
			},
			async API_wxPay(oid) {
				//微信支付
				let result = {
					param: {
						oid //订单id
					}
				};
				return await wxApi.wxPay(result);
			},
			requestPayment(data) {
				//uni支付接口
				return new Promise((resolve, reject) => {
					uni.requestPayment({
						timeStamp: data.timeStamp,
						nonceStr: data.nonceStr,
						package: data.packageValue,
						signType: data.signType,
						paySign: data.paySign,
						success: function(res) {
							resolve(res);
						},
						fail: function(err) {
							reject(err);
						}
					});
				});
			},
			changeCalendar(value) { //日期查询
				this.sday = value
			},
			async init(state, current, sday) { //初始化
				this.$nextTick(() => {
					this.$refs.loading.showLoading() // 显示
				})
				let res = await this.API_order(state, current, sday)
				if (res.data.code === 1000) {
					this.records = res.data.data.records //订单数据
					this.current = res.data.data.current //当前第几页
					this.pages = res.data.data.pages //共有多少页
				}
				this.$refs.loading.hideLoading() // 隐藏
			},
			async reachBottom() { //上拉加载更多
				if (this.current >= this.pages) return //如果当前页到最后一页停止加载

				this.status = 'loading'
				this.current++
				this.$refs.loading.showLoading() // 显示
				let res = await this.API_order(this.state, this.current, this.sday);
				if (res.data.code === 1000) {
					let orderList = res.data.data.records //获取订单
					this.records.push(...orderList)
					if (this.current >= this.pages) this.status = 'nomore'
					else this.status = 'loading'
				}
				this.$refs.loading.hideLoading() // 隐藏
			},
			pullDownRefresh() { //下拉刷新
				this.init(this.state, this.current, this.sday)
			},
			showCancelModal(items) { //显示取消弹窗
				this.cancelItems = items
				this.cancelModalShow = true
			},
			async cancelConfirm() { //取消订单
				let res = await this.API_cancelOrder(this.cancelItems.id)
				if (res.data.code === 1000) {
					this.$refs.uToast.show({
						title: res.data.msg,
						type: 'success',
					})
				} else {
					this.$refs.uToast.show({
						title: res.data.msg,
						type: 'error',
					})
				}
				this.init(this.state, 1, this.sday)
				this.cancelModalShow = false
			},
			async pay(val) { //继续支付
				let payRes = await this.API_wxPay(val.id)
				if (payRes.data.code === 1000) { //api支付成功
					let pay = await this.requestPayment(payRes.data.data) //支付

					if (pay.errMsg === "requestPayment:ok") {
						this.init(this.state, 1, this.sday)

						this.$refs.uToast.show({
							title: "支付成功",
							type: 'success',
						})
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order {
		height: 100%;

		.orderCard {
			//订单卡片
			border-bottom: 8px solid #f8f2f2;

			.orderHeader {
				//订单卡片头部
				border-bottom: 1px solid #f0f0f0;
				padding: 10rpx;
				box-sizing: border-box;

				.orderHeaderItem {
					//订单卡片头部选项
					padding: 5px 0 5px 10px;
				}

				.btns {
					//按钮
					display: flex;
					justify-content: flex-end;

					.btn {
						margin: 0 10rpx;
					}
				}
			}

			.orderContainer {
				//订单卡片内容
				padding: 20rpx;
				box-sizing: border-box;

				.orderList {
					//订单列表
					display: flex;
					margin: 10rpx 0;

					// 图片
					.img {
						width: 240rpx;
						height: 180rpx;
						overflow: hidden;
						border-radius: 30rpx;
						margin-right: 10rpx;
					}

					// 内容区
					.orderListBox {
						flex: 1;
						// 标题
						.orderListTitle {
							font-size: 28rpx;
						}

						// 成员
						.orderListItem {
							font-size: 24rpx;
							color: #82848A;
						}
					}

				}
			}
		}

		// 空空如也
		.empty {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
		}
	}
</style>
